<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>登录</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        .header {
            height: 230px;
            background: rgba(90, 194, 255, 1);
        }

        .bg {
            height: 230px;
            background: url("../../image/ui/bg_3.png");
            background-size: 100% 100%;
        }

        .close {
            width: 22px;
            height: 22px;
            margin: 33px 20px 0 0;
        }

        .h1 {
            font-size: 36px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-left: 40px;
        }

        .h2 {
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            margin-top: 20px;
            margin-left: 40px;
        }

        .btn-h2 {
            width: 80px;
            height: 24px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 1);
            margin-left: 3px;
        }

        .container {
            z-index: 2;
            position: relative;
            margin-top: -55px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px -2px 22px 0px rgba(0, 161, 255, 0.28);
            border-radius: 20px 20px 0px 0px;
            padding: 35px 40px 30px 40px;
        }

        .row {
            height: 50px;
            background: rgba(245, 245, 245, 1);
            border-radius: 25px;
        }

        .icon {
            width: 18px;
            min-width: 18px;
            height: 18px;
            margin-left: 19px;
        }

        .area-number {
            min-width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            margin-left: 18px;
            white-space: nowrap;
        }

        input {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        input::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .eye {
            width: 16px;
            height: 16px;
            margin-right: 20px;
        }

        .justify {
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(90, 90, 90, 1);
        }

        .btn {
            margin: 20px auto 0 auto;
            width: 210px;
            height: 46px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            text-align: center;
            padding-top: 8px;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 0.5);
            line-height: 25px;
        }

        .third-login-title {
            margin-top: 25px;
            position: relative;
            padding: 0 15px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
            overflow: visible;
        }

        .third-login-title::before {
            content: "";
            position: absolute;
            top: 50%;
            left: -20px;
            transform: translateY(-50%);
            width: 20px;
            height: 1px;
            transform: scaleY(0.5);
            background: #BFBFBF;
        }

        .third-login-title::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -20px;
            transform: translateY(-50%);
            width: 20px;
            height: 1px;
            transform: scaleY(0.5);
            background: #BFBFBF;
        }

        .third-login-item {
            margin-top: 16px;
            padding: 0 20px;
        }

        .third-login-icon {
            width: 30px;
            height: 30px;
            margin: 0 auto 5px auto;
        }

        .third-login-text {
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .checkbox {
            width: 16px;
            height: 16px;
            -webkit-appearance: none;
            background: url("../../image/ui/radio_2.png");
            background-size: 100% 100%;
            margin-right: 8px;
        }

        .checkbox:checked {
            background: url("../../image/ui/checked_2.png");
            background-size: 100% 100%;
        }

        .user-argeement {
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            text-align: center;
            white-space: nowrap;
        }

        .user-argeement-highlight {
            color: rgba(90, 194, 255, 1);
        }

        .get-verificode {
            min-width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: rgba(90, 194, 255, 1);
            margin-right: 20px;
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div id="login">
            <header class="header">
                <div class="bg">
                    <div data-flex="main:right">
                        <div class="close">
                            <img src="../../image/ui/close_2.png" alt="" tapmode onclick="fnBack()">
                        </div>
                    </div>
                    <div class="h1">登录</div>
                    <div class="h2" data-flex="cross:center">
                        <div>还没有账号吗?</div>
                        <div class="btn-h2" data-flex="main:center cross:center" tapmode
                            onclick="fnOpenloginPage('register')">点击注册</div>
                    </div>
                </div>
            </header>
            <div class="container">
                <div class="row" data-flex="cross:center" id="tel_login">
                    <div class="icon">
                        <img src="../../image/ui/phone.png" alt="">
                    </div>
                    <div class="area-number">
                        +86
                    </div>
                    <input style="text-indent: 8px;" data-flex-box="1" spellcheck="false" type="tel"
                        oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="telephone" maxlength="11"
                        data-type="_telphone" data-verify="true" data-null="true" data-regular="true" name="手机号"
                        placeholder="请输入电话号码">
                </div>
                <div class="row" style="margin-top: 26px;" data-flex="cross:center">
                    <div class="icon">
                        <img src="../../image/ui/verificode.png" alt="">
                    </div>
                    <input style="text-indent: 18px" data-flex-box="1" spellcheck="false" type="tel"
                        oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="verify_code" maxlength="6"
                        data-type="_code" data-verify="true" data-null="true" data-regular="true" name="验证码"
                        placeholder="请输入验证码">
                    <div class="get-verificode" tapmode @click="isSendCode?fnGetCode():''">{{sendBtnText}}</div>
                </div>
                <div class="justify" data-flex="main:justify cross:center">
                    <div tapmode onclick="fnOpenloginPage('login')">账号登录</div>
                    <div tapmode onclick="fnOpenloginPage('forget_password')">忘记密码</div>
                </div>
                <div class="btn" tapmode @click="isAvailable?fnLogin():openTips()">登录</div>
                <div style="margin-top: 35px;" data-flex="main:center cross:center">
                    <input id="checkbox" class="checkbox" type="checkbox">
                    <div class="user-argeement">登录注册即同意<span class="user-argeement-highlight" @click="openRichText('3','用户协议')">《用户协议》</span>
                        <span class="user-argeement-highlight" @click="openRichText('4', '隐私协议')">《隐私协议》</span></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        fnInit();
        // setTimeout(function() {
        //     fnSetPlayFrmFront();
        // }, 300);
        // fnLoginShow();
        // var _loginSpace = api.winHeight - (localStorage.safeBottom || 0) - AD(".login_top").offsetH() - AD(".login_bottom").offsetH();
        // vm.loginSpace = _loginSpace > 0 ? _loginSpace : 20;
    }
    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                // loginSpace: 0,
                telephone: "",
                verify_code: "",
                isAvailable: false, //登录按钮是否可用
                sendBtnText: "获取验证码",
                isSendCode: true,
                // isWxShow: false,
                // isQqShow: false,
                // isWbShow: false,
            },
            methods: {
                fnGetCode: function () {
                    fnGetVerifyCode()
                },
            },
            watch: { //监听手机号和密码的值，来判断开启和关闭登录按钮的点击状态
                telephone: function () {
                    fnLoginBtnStatus(this);
                },
                verify_code: function () {
                    fnLoginBtnStatus(this);
                }
            }
        })
    }

    function canLogin() {
        var check = document.getElementById('checkbox')
        if (check.checked) {
            return true;
        } else {
            fnToast('需先同意用户协议和隐私协议');
            return false;
        }
    }

    function openTips() {
        if(!vm.telephone) {
            fnToast('请输入手机号');
        } else if(!vm.verify_code) {
            fnToast('请输入验证码');
        }
    }
    //修改登录按钮的启用状态
    function fnLoginBtnStatus(el) {
        if (!isEmpty(vm.telephone) && !isEmpty(vm.verify_code)) {
            vm.isAvailable = true;
        } else {
            vm.isAvailable = false;
        }
    }
    // 获取验证码
    function fnGetVerifyCode() {
        if (fnVerify("tel_login")) {
            $S.ShowProgress();
            var postData = {
                "phone": vm.telephone,
                "loginType": "9"
            }
            $S.POST("verifyCode/sendCode", postData, function (ret, err) {
                if (ret && ret.status == "200") {
                    vm.isSendCode = false;
                    fnVerifyTime('60', vm);
                };
                $S.CloseProgress();
            });
        }
    }
    // 手机号快速登录
    function fnLogin() {
        if (canLogin() && fnVerify("login")) {
            $S.ShowProgress();
            var postData = {
                "phone": vm.telephone,
                "code": vm.verify_code
            };
            $S.POST("apiTbAppUser/codeLogin", postData, function (ret, err) {
                if (ret && ret.status == "200") {
                    fnToast("登录成功");
                    fnWhenLoginSucess(ret.data);
                    // 触发用户已登录事件
                    api.sendEvent({
                        name: 'loginStatus',
                        extra: {
                            login: true,
                        }
                    })
                    // 如果用户已完成后续流程,则跳转到首页,否则按照流程跳转到设置密码页面
                    if (true) {
                        openMainWin();
                    } else {
                        fnOpenPublicWin(
                            '设置登录密码',
                            'login/set_password'
                        )
                    }
                };
                $S.CloseProgress();
            });
        }
    }

    // function fnLoginShow() {
    //     var wx_btn = WX();
    //     wx_btn.isInstalled(function(status) {
    //         if (status) {
    //             vm.isWxShow = true;
    //         }
    //     });
    //     var qq_btn = QQ();
    //     qq_btn.installed(function(status) {
    //         if (status) {
    //             vm.isQqShow = true;
    //         }
    //     });
    //     var weibo_btn = WEIBO();
    //     weibo_btn.isInstalled(function(status) {
    //         if (status) {
    //             vm.isWbShow = true;
    //         }
    //     });
    // }

    //第三方登录
    var _pData = {}; //用于提交个人信息的参数
    function fnModLogin(key) { //key 1:微信登录; 2:QQ登录; 3:微博登录
        fnLoginType(key, function (_param, ret1, err1) {
            console.log(JSON.stringify(_param));
            console.log(JSON.stringify(ret1))
            console.log(JSON.stringify(ret1.info))
            console.log(JSON.stringify(err1));
            if (key == "1") { //微信登录
                // alert(JSON.stringify(ret1))
                _pData.nickName = ret1.nickname;
                _pData.avatar = ret1.headimgurl;
            } else if (key == "2") { //qq登录
                _pData.nickName = JSON.parse(ret1.info).nickname;
                _pData.avatar = JSON.parse(ret1.info).figureurl_qq_1;
            } else if (key == "3") { //微博登录
                _pData.nickName = ret1.userInfo.screen_name;
                _pData.avatar = ret1.userInfo.profile_image_url;
            }
            console.log(JSON.stringify(_pData))
            //用于判断第三方是否绑定过手机号
            $S.ShowProgress();
            var postData = {
                "thirdType": '',
                "thirdPartyId": '',
                "mustBindPhone": ''
            };
            $S.POST("apiTbAppUser/thirdPartyLogin", postData, function (ret, err) {
                if (ret && ret.status == "200") {
                    if (ret.notBindingThirdPartyUser == "1") {
                        console.log("未绑定过手机号");
                        //打开绑定手机号页面
                        fnToast("授权成功，需进行手机号绑定");
                        setTimeout(function () {
                            //打开新页面
                            var pageData = {
                                "key": key,
                                "threeLoginId": postData.threeLoginId,
                                "nickName": _pData.nickName,
                                "avatar": _pData.avatar
                            }
                            fnOpenloginPage('bind_phone', pageData)
                        }, "200")

                    } else if (ret.notBindingThirdPartyUser != "1") {
                        console.log("绑定过手机号");
                        fnToast("登录成功");
                        api.closeWin({
                            name: 'login'
                        });
                        fnWhenLoginSucess(ret.data);
                        fnDelayCloseWin(300);
                        api.sendEvent({
                            name: 'loginStatus',
                            extra: {
                                login: true,
                            }
                        })
                    }
                }
                $S.CloseProgress();
            })

        })

    }

    function fnOpenloginPage(url, pageData) {
        var param = {
            name: url,
            url: '../login/' + url + '.html',
            pageParam: pageData || {}
        }
        fnOpenWin(param)
    }
    // 返回上一页
    function fnBack() {
        fnDelayCloseWin()
    }

    // 打开富文本页面
    function openRichText(param, title) {
        fnOpenPublicWin(title, 'question/richText_frm', {
            textType: param
        });
    }
</script>

</html>